<template>
  <div class="compile" v-if="props.status == 2">
    <div class="subcategory" :style="[packUp ? baseStyles : '']">
      <div class="sub_left">
        <p class="label">所属类目：</p>
        <ul class="list">
          <li :class="['item', ids == 0 ? 'on' : '']" @click="onclick(0)">
            <el-button :color="ids == 0 ? '#0fcc81' : '#fff'" class="addBtn">
              <p :class="['itemP', ids == 0 ? 'active' : '']">全部</p>
            </el-button>
          </li>
          <li
            :class="['item']"
            v-for="item in props.data.compile"
            :key="item.id"
            @click="onclick(item.id)"
          >
            <el-button
              :color="item.id != ids ? '#fff' : '#0fcc81'"
              class="addBtn"
            >
              <p :class="['itemP', ids == item.id ? 'active' : '']">
                {{ item.title }}
              </p>
              <el-icon
                @click="onDelCompile(item.id)"
                v-if="item.id == ids"
                :class="['itemP', ids == item.id ? 'active' : '']"
              >
                <CloseBold />
              </el-icon>
            </el-button>
          </li>
        </ul>
      </div>
      <div class="packUp" @click="onPackUp">
        <p>收起</p>
        &nbsp;
        <el-icon>
          <ArrowUpBold />
        </el-icon>
      </div>
    </div>
    <div class="otherOptions">
      <div class="oherLeft">
        <p class="label">其他选项：</p>
        <div class="newJob">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="新建作业：">
              <el-input
                v-model="formInline.userInp"
                placeholder="请输入评论评论"
                @keyup.enter.native="onSearchIpt"
                clearable
              />
              <input
                class="newJob_input"
                v-model="formInline.userInp"
                placeholder="请输入评论评论"
                @keyup.enter.native="onSearchIpt"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                :color="props.status == 2 ? '#ffffff' : '#0fcc81'"
                @click="onSubmit"
                :class="['submit', props.status == 2 ? 'active' : '']"
              >
                提交
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="otherRight">
        <el-popover :visible="visible" placement="bottom" :width="200">
          <template #default>
            <el-radio-group v-model="radio1">
              <el-radio value="1" size="large"> MIDI乐谱 </el-radio>
              <el-radio value="2" size="large" @click="onAddPython">
                Python乐谱
              </el-radio>
            </el-radio-group>
          </template>
          <template #reference>
            <el-button @click="showRadio" color="#0fcc81" class="addBtn">
              <el-icon class="btnAdd"><Plus /></el-icon>
              <p class="btnAdd">新建乐谱</p>
            </el-button>
          </template>
        </el-popover>
      </div>
    </div>
    <!-- <div class="blank"></div> -->
  </div>
</template>

<script setup>
import { ref, reactive,onMounted } from "vue";

const props = defineProps(["status", "data", "done"]);
const emit = defineEmits(["onAddCompile", "onDelCompile", "addList"]);
// 选中的类目
const ids = ref(0);
const onclick = (id) => {
  console.log("id: ", id);
  ids.value = id;
};
// 添加
const formInline = reactive({
  userInp: "",
});
// 添加事件
const onSearchIpt = (e) => {
  if (e.keyCode == 13) {
    console.log("search", 1111111111111111111111111111);
    onSubmit();
  }
};
const onSubmit = () => {
  if (formInline.userInp != "") {
    let obj = {
      id: new Date().getTime(),
      title: formInline.userInp,
      userId:props.data.id,
    };
    emit("onAddCompile", obj);
    formInline.userInp = "";
  } else {
    console.log("不能为空");
  }
};
// 删除事件
const onDelCompile = (id) => {
  console.log("id: ", id);
  emit("onDelCompile", {id,userId:props.data.id});
};
// 下拉
const packUp = ref(false);
const baseStyles = {
  height: "64.9px",
};
const onPackUp = () => {
  packUp.value = !packUp.value;
};
const visible = ref(false);
const radio1 = ref("");
const onAddPython = () => {
  visible.value = !visible.value;
  emit("addList", !props.done);
};
const showRadio = () => {
  visible.value = !visible.value;
  radio1.value = "";
  console.log(visible.value);
};
onMounted(() => {
  document.addEventListener("click", (e) => {
    // console.log(e.target.className);
    if (e.target.className != "el-radio-group" && e.target.className != "el-radio__inner" && e.target.className != "btnAdd") {
      // console.log(1111);
      visible.value = false;
    }
  });
});
</script>
<style scoped lang="scss">
.compile {
  .subcategory {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ccc;
    // line-height: 40px;
    overflow: hidden;

    .sub_left {
      display: flex;
      align-items: baseline;

      .label {
        width: 100px;
        font-weight: bold;
        margin-top: 3px;
      }

      .list {
        display: flex;
        flex-wrap: wrap;
        width: 750px;

        // width: 70%;
        .item {
          line-height: 23px;
          height: 23px;
          margin-top: 20px;

          .addBtn {
            line-height: 23px;
            color: black;

            .itemP {
              &.active {
                color: white;
                // background-color: #0ecb80;
                display: flex;
                align-items: center;
                line-height: 23px;
                border-radius: 10px;
                height: 23px;
              }
            }
          }

          &.on {
            background-color: #0ecb80;
            color: white;
            display: flex;
            align-items: center;
            line-height: 23px;
            border-radius: 10px;
            height: 23px;
          }
        }
      }
    }

    .packUp {
      font-weight: 500;
      color: #0ecb80;
      margin-top: 25px;
      font-style: 12px;
      display: flex;
      align-items: center;
    }
  }

  .otherOptions {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;

    .oherLeft {
      display: flex;

      .label {
        width: 100px;
        font-weight: bold;
        margin-top: 3px;
      }

      .newJob {
        .demo-form-inline .el-input {
          --el-input-width: 220px;
        }

        .demo-form-inline .el-select {
          --el-select-width: 220px;
        }

        .submit {
          color: white;

          &.active {
            border: 1px solid #0ecb80;
            color: #0ecb80;
          }
        }

        .newJob_input {
          width: 0;
          height: 0;
          visibility: hidden;
        }
      }
    }

    .otherRight {
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: #0ecb80;
      color: white;
      display: flex;
      align-content: center;
      border-radius: 3px;

      .addBtn {
        color: white;
      }

      p {
        padding-left: 10px;
      }

      .el-button + .el-button {
        margin-left: 8px;
      }
    }
  }
}
/* 自定义单选框样式为方块 */
.el-radio__input.is-checked + .el-radio__label {
  /* 这里可能需要根据实际情况调整选择器，因为 Element Plus 的内部结构可能会变化 */
  /* 以下是一个基本的示例，它可能不直接工作，因为 Element Plus 使用伪元素来创建单选框的视觉效果 */
  /* 你可能需要使用开发者工具来找到正确的选择器 */
  background-color: #409eff; /* 选中时的背景色 */
  border-radius: 0; /* 移除圆角 */
  /* 可能还需要添加其他样式来完全自定义外观 */
}

/* 自定义未选中时的样式（可选） */
.el-radio__input + .el-radio__label {
  /* 类似地，你可能需要调整选择器来匹配未选中的单选框 */
  /* 这里只是示例，实际上你可能需要针对 .el-radio__inner 进行样式调整 */
  border-radius: 0; /* 移除圆角 */
  /* 其他样式... */
}

/* 注意：上面的选择器可能不直接工作，因为 Element Plus 的单选框样式比较复杂 */
/* 你可能需要使用开发者工具来检查并找到正确的元素和类名 */
</style>
